<template>
  <div class="card-container">
    <!-- <div>行车管理-月卡管理</div> -->
    <!-- 搜索区域 -->
    <div class="search-container">
      <span class="search-label">车牌号:</span>
      <el-input v-model="params.carNumber" clearable placeholder="请输入内容" class="search-main" />
      <span class="search-label">车主姓名:</span>
      <el-input v-model="params.personName" clearable placeholder="请输入内容" class="search-main" />
      <span class="search-label">状态:</span>
      <el-select v-model="params.cardStatus">
        <el-option v-for="item in cardStatusList" :key="item.id" :value="item.id" :label="item.name" />
      </el-select>
      <el-button type="primary" class="search-btn" @click="doSearch">查询</el-button>
    </div>

    <!-- 新增删除操作区域 -->
    <div class="create-container">
      <div class="create-row">
        <el-button type="primary" @click="$router.push('/cardAdd')">添加月卡</el-button>
        <el-button @click="deleteCards">批量删除</el-button>
      </div>
      <div class="create-label">
        <!--        <el-alert-->
        <!--          :title="totalLabel"-->
        <!--          type="info"-->
        <!--          show-icon-->
        <!--          :closable="false"-->
        <!--        />-->
        <span class="create-label-span">
          {{ totalLabel }}
        </span>
      </div>

    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table
        ref="multipleTable"
        :data="cardList"
        style="width: 100%"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column type="index" label="序号" />
        <el-table-column label="车主名称" prop="personName" />
        <el-table-column label="联系方式" prop="phoneNumber" />
        <el-table-column label="车牌号码" prop="carNumber" />
        <el-table-column label="车辆品牌" prop="carBrand" />
        <el-table-column label="剩余有效天数" prop="totalEffectiveDate" />
        <el-table-column label="状态" prop="cardStatus" :formatter="formatStatus" />
        <el-table-column label="操作" fixed="right" width="180">
          <template #default="scope">
            <el-button type="text" size="mini">续费</el-button>
            <el-button type="text" size="mini">查看</el-button>
            <el-button type="text" size="mini" @click="editCard(scope.row.id)">编辑</el-button>
            <el-button type="text" size="mini" @click="deleteCard(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--    分页器 -->
    <div class="page-container">
      <el-pagination
        background
        layout="total,prev, pager, next"
        :page-size="params.pageSize"
        :total="total"
        @current-change="pageHandleCurrentChange"
      />
    </div>
    <!--  添加楼宇  -->
    <el-dialog title="添加楼宇" width="580px">
      <!--  表单接口    -->
      <div class="form-container">
        <el-form ref="addForm" :model="addForm" :rules="addFormRules">
          <el-form-item label="楼宇名称" prop="name">
            <el-input v-model="addForm.name" />
          </el-form-item>
          <el-form-item label="楼宇层数" prop="floors">
            <el-input v-model="addForm.floors" />
          </el-form-item>
          <el-form-item label="在管面积" prop="area">
            <el-input v-model="addForm.area" />
          </el-form-item>
          <el-form-item label="物业费" prop="propertyFeePrice">
            <el-input v-model="addForm.propertyFeePrice" />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" size="mini" @click="addCar">确 定</el-button>
      </div>
    </el-dialog>
  </div></template>
<script>
import { getCardListAPI, deleteCardAPI, deleteCardsAPI, getCardTotalAPI } from '@/api/card'

export default {
  name: 'CarCard',
  data() {
    return {
      // 查询参数
      params: {
        page: 1,
        pageSize: 4,
        carNumber: null,
        personName: null,
        cardStatus: null
      },
      // 月卡状态
      cardStatusList: [
        { id: null, name: '全部' },
        { id: 0, name: '可用' },
        { id: 1, name: '过期' }
      ],
      total: 0, // 总条数
      // 月卡列表
      cardList: [],
      dialogVisible: false,
      addForm: {
        name: '',
        floors: '',
        area: '',
        propertyFeePrice: ''
      },
      addFormRules: {
        name: [{ required: true, message: '请输入楼宇名称', trigger: 'blur' }],
        floors: [{ required: true, message: '请输入楼宇层数', trigger: 'blur' }],
        area: [{ required: true, message: '请输入在管面积', trigger: 'blur' }],
        propertyFeePrice: [{ required: true, message: '请输入物业费', trigger: 'blur' }]
      },
      cardDataTotal: {
        cardCount: 0,
        spaceNumber: 0,
        proportion: ''
      }

    }
  },
  computed: {
    totalLabel() {
      return '本园区共计' + this.cardDataTotal.spaceNumber + '个车位，月卡用户 ' + this.cardDataTotal.cardCount + '人，车位占有率 ' + this.cardDataTotal.proportion
    }
  },
  mounted() {
    this.getCardList()
    this.getCardTotal()
  },
  methods: {
    // 查询月卡列表
    async getCardList() {
      const res = await getCardListAPI(this.params)
      this.cardList = res.data.rows
      this.total = res.data.total
    },
    formatStatus(row, column, cellValue, index) {
      const MAP = {
        0: '正常',
        1: '过期',
        2: '未激活'
      }

      return MAP[row.cardStatus]
    },
    pageHandleCurrentChange(page) {
      // 把点击的页数赋值给请求参数页数
      this.params.page = page
      // 使用最新的请求参数获取列表数据
      this.getCardList()
    },
    doSearch() {
      // 重置页码
      this.params.page = 1
      this.getCardList()
    },
    // 添加楼宇
    addCar() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          this.dialogVisible = false
        }
      })
    },
    // 编辑月卡
    editCard(id) {
      this.$router.push({
        path: '/cardAdd',
        query: {
          id
        }
      })
    },
    // 删除单张月卡
    deleteCard(id) {
      this.$confirm('此操作将永久删除改月卡, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await deleteCardAPI(id)
        if (res.code === 10000) {
          await this.getCardList() // 删除成功后重新获取列表
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        } else {
          this.$message({
            type: 'warning',
            message: res.msg
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },
    // 批量删除月卡
    deleteCards() {
      console.log(this.multipleSelection)
      if (this.multipleSelection === undefined || this.multipleSelection.length === 0) {
        this.$message({
          type: 'warning',
          message: '请选择要删除的月卡'
        })
        return
      }

      this.$confirm('此操作将永久删除批量月卡, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await deleteCardsAPI(this.multipleSelection.map(item => item.id))
        if (res.code === 10000) {
          await this.getCardList() // 删除成功后重新获取列表
          this.$message({
            type: 'success',
            message: '批量删除成功!'
          })
        } else {
          this.$message({
            type: 'warning',
            message: res.msg
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 获取当前停车信息
    async getCardTotal() {
      const res = await getCardTotalAPI()
      const { cardCount, spaceNumber, proportion } = res.data
      this.cardDataTotal = { cardCount, spaceNumber, proportion }
    }
  }
}
</script>

<style lang="scss" scoped>
.card-container {
  padding: 20px;
  background-color: #fff;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  padding-bottom: 20px;

  .search-main {
    width: 220px;
    margin-right: 10px;
  }

  .search-btn {
    margin-left: 20px;
  }
}
.create-container {
  margin-top: 10px;
  height: 40px;
  display: flex;

  /*.create-label{
    float: left;*/
    /*justify-content: center;
    align-items: center;
    flex-direction: column;*/

  }
.create-row{
  float: left;
  width: 20%;
  height: 100%;
  position: absolute;
  overflow: auto;
}

.create-label{
  right: 0;
  width: 50%;
  position: absolute;
  overflow: auto;
  float: right;

}
.create-label-span{
  //background-color: rgb(230,247,255);
  align-items:center;
  background-color:#e6f7ff;
  border:1px solid #91d5ff;
  border-radius:2px;
  bottom:0;
  box-sizing:border-box;
  color:rgba(0,0,0,.85);
  display:flex;
  font-size:14px;
  font-variant:tabular-nums;
  font-variant-numeric:tabular-nums;
  height:40px;
  left:0;
  line-height:22.001px;
  list-style-type:none;
  overflow-wrap:break-word;
  padding:8px 15px;
  position:relative;
  right:0;
  text-size-adjust:100%;
  top:0;
  width:428.047px;
  -webkit-locale:"en";
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  -webkit-tap-highlight-color:transparent

}
.page-container {
  padding: 4px 0;
  text-align: right;
}
.form-container {
  padding: 0 80px;
}

</style>
